<!--
 - MineAdmin is committed to providing solutions for quickly building web applications
 - Please view the LICENSE file that was distributed with this source code,
 - For the full copyright and license information.
 - Thank you very much for using MineAdmin.
 -
 - @Author X.Mo<root@imoi.cn>
 - @Link   https://gitee.com/xmo/mineadmin-vue
-->
<template>
  <div class="ma-content-block lg:flex justify-between p-4">
    <!-- CRUD 组件 -->
    <ma-crud :options="crud" :columns="columns" ref="crudRef">
      <template #operationCell="{ record }">
        <a-popconfirm content="确实要将该用户强制退出吗?" position="bottom" @ok="kick(record)">
          <a-link v-auth="['system:onlineUser:kick']"><icon-import /> 强制退出</a-link>
        </a-popconfirm>
      </template>
    </ma-crud>
  </div>
</template>

<script setup>
  import { ref, reactive } from 'vue'
  import monitor from '@/api/system/monitor'
  import { Message } from '@arco-design/web-vue'

  const crudRef = ref()

  const kick = async (row) => {
    const response = await monitor.kickUser({ id: row.id })
    response.success && Message.success(response.message)
  }

  const crud = reactive({
    api: monitor.getOnlineUserPageList,
    showIndex: false,
    operationColumn: true,
    operationColumnWidth: 120,
    searchColNumber: 2,
    pageLayout: 'fixed',
  })

  const columns = reactive([
    { title: '用户账户', dataIndex: 'username', search: true, width: 180 },
    { title: '用户昵称', dataIndex: 'nickname', width: 180 },
    { title: '登录IP', dataIndex: 'login_ip', width: 180 },
    { title: '登录时间', dataIndex: 'login_time', width: 180 },
  ])
</script>

<script>
export default { name: 'system:onlineUser' }
</script>

<style scoped>

</style>